<template>
  <view class="logistics-page">
	<view v-if="!logisticsInfo.id && !loading" class="empty-cart">
	  	<u-empty iconSize="200"></u-empty>
	</view>
    <!-- 物流信息 -->
    <scroll-view scroll-y class="container" :style="{height: scrollHeight + 'px'}" v-if="!loading" >
      <!-- 物流状态卡片 -->
      <view class="status-card">
        <view class="courier-info">
          <view class="left">
            <u-icon name="courier" size="28" color="#ff2d51"></u-icon>
            <text class="company">{{logisticsInfo.company}}</text>
          </view>
          <text class="number">运单号：{{logisticsInfo.number}}</text>
        </view>
        <view class="delivery-status">
          <text class="status">{{logisticsInfo.statusText}}</text>
          <text class="desc">{{logisticsInfo.desc}}</text>
        </view>
      </view>
      
      <!-- 物流时间轴 -->
      <view class="section">
        <view class="section-title">物流进度</view>
        <view class="timeline">
          <view 
            v-for="(item, index) in logisticsInfo.traces" 
            :key="index" 
            class="timeline-item"
            :class="{active: index === 0}"
          >
            <view class="timeline-dot"></view>
            <view class="timeline-line" v-if="index !== logisticsInfo.traces.length - 1"></view>
            <view class="timeline-content">
              <view class="time">{{item.time}}</view>
              <view class="desc">{{item.desc}}</view>
              <view class="location" v-if="item.location">
                <u-icon name="map" size="16" color="#999"></u-icon>
                <text>{{item.location}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 商品信息 -->
      <view class="section">
        <view class="section-title">商品信息</view>
        <view class="goods-card">
          <u-image 
            :src="goodsInfo.goodsImage" 
            width="120rpx" 
            height="120rpx" 
            radius="8"
          ></u-image>
          <view class="goods-info">
            <view class="goods-name">{{goodsInfo.goodsName}}</view>
            <view class="goods-spec">规格：{{goodsInfo.spec}}</view>
            <view class="goods-count">数量：{{goodsInfo.count}}件</view>
          </view>
        </view>
      </view>
      
      <!-- 物流公司信息 -->
      <view class="section">
        <view class="section-title">物流公司</view>
        <view class="company-info">
          <view class="info-item">
            <text class="label">公司名称：</text>
            <text class="value">{{logisticsInfo.company}}</text>
          </view>
          <view class="info-item">
            <text class="label">客服电话：</text>
            <text class="value tel" @click="callCourierService">{{logisticsInfo.serviceTel}}</text>
          </view>
          <view class="info-item">
            <text class="label">官方网站：</text>
            <text class="value">{{logisticsInfo.website}}</text>
          </view>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-btns">
        <u-button 
          type="primary" 
          plain 
          shape="circle" 
          text="复制运单号"
          @click="copyTrackingNumber"
        ></u-button>
        <u-button 
          type="error" 
          shape="circle" 
          text="联系客服"
          @click="callCourierService"
          customStyle="margin-left: 20rpx"
        ></u-button>
      </view>
    </scroll-view>
  </view>
</template>

<script>
	import {
		httpsend
	} from '@/api/api';
export default {
  data() {
    return {
	  loading:false,
      scrollHeight: 0,
      logisticsInfo: {},
      goodsInfo: {}
    }
  },
  onLoad(options) {
    if (options.id) {
      this.loadLogisticsInfo(options.id);
    }
    this.calcScrollHeight();
  },
  methods: {
    calcScrollHeight() {
      const systemInfo = uni.getSystemInfoSync();
      this.scrollHeight = systemInfo.windowHeight;  
    },
    
    // 加载物流信息
    async loadLogisticsInfo(orderId) {
		
		try {
			uni.showLoading({
				title: '加载中...'
			});
			this.loading=true;
			let param={
				usrid:uni.getStorageSync('usrid'),
				id:orderId,
			}
			const res = await httpsend('getlogisticsInfo');
			if (res?.code === 1) {
				//物流信息
				this.logisticsInfo = res.logisticsInfo;
				//商品信息
				this.goodsInfo = res.goodsInfo;
			} else {
				this.$api.msg(res.msg);
			}
			uni.hideLoading();
			this.loading=false;
		} catch (err) {
			this.loading=false;
			uni.hideLoading();
			console.log('err', err);
		}
    },
    
    // 复制运单号
    copyTrackingNumber() {
      uni.setClipboardData({
        data: this.logisticsInfo.number,
        success: () => {
          uni.showToast({title: '运单号已复制'});
        }
      });
    },
    
    // 联系物流客服
    callCourierService() {
      uni.makePhoneCall({
        phoneNumber: this.logisticsInfo.serviceTel
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.logistics-page {
  height: 100vh;
  background-color: #f7f7f7;
}

.container {
  padding: 20rpx;
}

.status-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .courier-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx dashed #eee;
    
    .left {
      display: flex;
      align-items: center;
      
      .company {
        font-size: 28rpx;
        font-weight: bold;
        margin-left: 10rpx;
      }
    }
    
    .number {
      font-size: 24rpx;
      color: #666;
    }
  }
  
  .delivery-status {
    .status {
      display: block;
      font-size: 30rpx;
      font-weight: bold;
      color: #ff2d51;
      margin-bottom: 10rpx;
    }
    
    .desc {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }
}

.timeline {
  padding-left: 40rpx;
  position: relative;
  
  .timeline-item {
    position: relative;
    padding-bottom: 40rpx;
    
    &.active {
      .timeline-dot {
        background-color: #ff2d51;
        border-color: #ff2d51;
      }
      
      .time {
        color: #ff2d51;
        font-weight: bold;
      }
    }
    
    &:last-child {
      padding-bottom: 0;
    }
  }
  
  .timeline-dot {
    position: absolute;
    left: -46rpx;
    top: 0;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    border: 4rpx solid #e4e7ed;
    background-color: #fff;
    z-index: 2;
  }
  
  .timeline-line {
    position: absolute;
    left: -38rpx;
    top: 20rpx;
    bottom: 0;
    width: 2rpx;
    background-color: #e4e7ed;
  }
  
  .timeline-content {
    .time {
      font-size: 26rpx;
      color: #666;
      margin-bottom: 8rpx;
    }
    
    .desc {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 8rpx;
    }
    
    .location {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999;
      
      text {
        margin-left: 6rpx;
      }
    }
  }
}

.goods-card {
  display: flex;
  
  .goods-info {
    flex: 1;
    margin-left: 20rpx;
    
    .goods-name {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    
    .goods-spec {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 10rpx;
    }
    
    .goods-count {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.company-info {
  .info-item {
    display: flex;
    margin-bottom: 16rpx;
    font-size: 26rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      color: #666;
      width: 160rpx;
    }
    
    .value {
      flex: 1;
      color: #333;
      
      &.tel {
        color: #ff2d51;
      }
    }
  }
}

.action-btns {
  display: flex;
  justify-content: center;
  margin: 40rpx 0;
  padding: 0 20rpx;
}
</style>